<template>
  <div class="driver-wrapper">
    <el-dialog
      title="派车单设置"
      :visible.sync="dialogVisible"
      width="1000px  "
      class="tableDialog"
    >
<!--      <div>-->
<!--          <p><el-tag type="" effect="dark">{{$dictUtils.getDictLabel("transState", this.state, "")}}</el-tag><span style="margin-left: 20px;">{{this.truckNumber}}</span><span style="margin-left: 20px;">{{this.axle}}</span></p>-->
<!--          <p><span style="margin-left: 90px">来源：{{$dictUtils.getDictLabel("transSourceType", this.sourceType, "")}}</span><span style="margin-left: 170px">派车单号：{{this.transCode}}</span></p>-->
<!--      </div>-->
      <div class="dialog-container">
        <div class="left-wrapper">
          <el-table
            size="mini"
            v-loading="loading"
            :data="tableData"
            style="width: 100%;"
            border
            :header-cell-style="{
                'background-color': '#eeeeee !important',
              }"
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              type="index"
              label="序号"
              width="60"
              align="center"
            >
              <template slot-scope="scope">
                  <span>{{
                    (page.pageNo - 1) * page.pageSize + scope.$index + 1
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="names"
              label="属性名称"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop=""
              label="属性值"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.componentType!==4 || scope.row.componentType!==5">{{$dictUtils.getDictLabel(scope.row.dictCode, scope.row.svalue, "") | noValue}}</span>
                <span v-if="scope.row.componentType===4 || scope.row.componentType===5">{{scope.row.svalue | noValue}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="describes"
              label="属性说明"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                {{scope.row.describes | noValue}}
              </template>
            </el-table-column>
            <el-table-column label="操作"  width="75px">
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="edit(scope.row)"
                >设置
                </el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="page.pageSize"
            :current-page="page.pageNo"
            layout="total,prev, pager, next"
            :total="page.total"
          >
          </el-pagination>
        </div>
        <div class="right-wrapper">
          <div class="detail-title">
            <p>基本信息</p>
          </div>
          <div class="detail-content">
            <ul>
              <li><span>车牌:</span>{{this.truckNumber}}</li>
              <li><span>车轴:</span>{{this.axle| noValue}}</li>
              <li><span>状态:</span>{{$dictUtils.getDictLabel("transState", this.state, "")}}</li>
              <li><span>来源:</span>{{$dictUtils.getDictLabel("transSourceType", this.sourceType, "") | noValue}}</li>
              <li><span>派车单号:</span>{{this.transCode| noValue}}</li>
            </ul>
          </div>
        </div>
      </div>
    </el-dialog>
      <editProperty ref="editProperty" @refreshDataList="getVarList(page)"></editProperty>
  </div>
</template>
<script>
  import { getVarList } from '@/api/transport/transport.js'
  import editProperty from './editProperty'
  import Template from "../form/template";

  export default {
    data () {
      return {
        tableData: [],
        loading: false,
        dialogVisible: false,
        inputName: '',
        state: '',
        truckNumber: '',
        axle: '',
        sourceType: '',
        transCode: '',
        transportId: '',
        data: [],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 20
        }
      }
    },
      components: {
          Template,
          editProperty
      },
    methods: {
      init (method, row) {
          if (method === 'properties') {
              this.dialogVisible = true
              this.state = row.state
              this.truckNumber = row.truckNumber
            if (row.axle && row.axle.axle) {
              this.axle = row.axle.axle
            }
              this.sourceType = row.sourceType
              this.transCode = row.transCode
              this.transportId = row.id
              this.getVarList(this.page)
          }
      },
      edit (row) {
          this.$refs.editProperty.init('edit', row, this.transportId)
      },
      handleCurrentChange (e) {
        this.page.pageNo = e
        // this.getDriverList(this.page)
      },
      // 获取列表
      getVarList (params) {
        this.loading = true
        getVarList({
          otherUse: '1',
          pageSize: params.pageSize,
          pageNo: params.pageNo
        }).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.result.list
            this.page.total = res.data.result.count
          }
          this.loading = false
        })
      },

      // 点击树获取列表和搜索获取列表
      // getList2 ($event, isSearch) {
      //   if (isSearch) {
      //     getDriverList({names: $event}).then((res) => {
      //       if (res.data.code === '200') {
      //         this.tableData = res.data.result.list
      //         this.page.total = res.data.result.count
      //       }
      //     })
      //   }
      // },

      tableRowClassName ({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },
      // 选择行
      selectRow (row) {
        this.$emit('getDriverData', row)
        this.dialogVisible = false
      },
      close () {
      },
      doSubmit () {
      }
    }
  }
</script>
<style scoped lang="scss">
  .driver-wrapper{
    ::v-deep.el-dialog{
      .el-dialog__body{
        .left-wrapper{
          width:calc(100% - 288px)
        }
        .right-wrapper{
          width: 258px;
          margin-left: 30px;
          .detail-title{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
          }
          ul{
            list-style: none;
            margin: 10px 0;
            padding-left: 0;
            li{
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 28px;
              >span:first-child{
                margin-right: 12px;
                color: #999999;
              }
              .use{
                display: flex;
                >div:first-child{
                  margin-right: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
  .dialog-container {
    width: 100%;
    display: flex;
  }
</style>
